import {FC, useEffect, useState} from "react"
import Swiper from "../../componets/swiper";
import NavBar from "../../componets/NavBar";
import Film from "./componets/film";
import TabBar from "../../componets/TabBar";
import './styled.scss'
interface Props {}

const Index:FC<Props> = ()=> {
    const [active,setActive] = useState(0)

    const [headerStyle,setHeaderStyle] = useState({
        width:'100%' ,
        position:"relative",
        top:'-50px'
    })
    useEffect(()=> {
        const htmlObj = document.documentElement
        document.addEventListener('scroll',()=>{
            if(htmlObj.scrollTop >= 210){
                headerStyle.position = "fixed"
                headerStyle.top = '0px'
            }else{
                headerStyle.position = "relative"
                headerStyle.top = '-50px'
            }
            setHeaderStyle({...headerStyle})
        })
    },[])

    const onTabsChange = (value:0|1)=>{
        setActive(value)

    }

    return (
        <>
            <Swiper/>
            <header style={ headerStyle as object }>
                <NavBar title={'锋神电影'} left={
                    <>
                        <p>全国</p>
                        <i className='iconfont icon-buttom'></i>
                    </>
                }/>
                <div className='tabs'>
                    <p className={`${active || 'active'}`} onClick={()=>onTabsChange(0)}>正在热映</p>
                    <p className={`${active && 'active'}`} onClick={()=>onTabsChange(1)}>即将上映</p>
                    <div className='line' style={{left:[0,'50%'][active]}}>
                        <span></span>
                    </div>
                </div>
            </header>

            <Film type ={active + 1}></Film>

            <TabBar></TabBar>
        </>
    )
}

export default Index
